<template>
<div class="download">
<div class="haibei-banner">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" style="background:url(/static/images/banner2-1.jpg) top left no-repeat;background-size:cover;height:1010px">
                        <div class="flex-left">
                            <div class="" style="margin-left:200px;">
                                <p class=" fs40 white-color bold">悦享生活 乐享交易 海贝社区</p>
                                <p class="mt15 fs40 white-color bold"> ——全球外汇交易智能辅助平台</p>
                                <p class="mt30 light-grey-banner  fs22">海贝社区客户端多平台涵盖</p>
                                <p class="mt30">
                                    <img src="/static/images/banner2-2.png" alt="">
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <template v-show="false">
                <div class="swiper-pagination"></div>
                <div class="swiper-button-prev swiper-button-white"></div> 
               <div class="swiper-button-next swiper-button-white"></div>
              </template> -->

            </div>
        </div>

        <div class="haibei-news" style="background:#fff;">
            <div class="haibei-warpper">
                <p class="c-blue-color fs30 tc">海贝社区客户端下载</p>
                <div class="haibei-guide-content clearfix mt80" style="border-bottom:1px solid #eee;">
                    <template v-for="(value,key) in newsList">
                        <dl class="download-item index-items" :key="key">
                            <dt class="tc download-icon">
                                <div>
                                    <img :src="value.url" alt="">
                                    <p class="mt5">{{value.title}}</p>
                                    <p class="mt5">{{value.version}}</p>
                                </div>
                            </dt>
                            <dd class="pt30 pl20 pr20 pb30 c-gray-color fs12 download-item-desc" style="line-height:25px" v-html="value.desc"></dd>
                            <dd class="mt20">
                                <a href="javascript:;" class="btn btn-line fs18" @click="downloadModal(value)">{{value.name}}</a>
                            </dd>
                        </dl>
                    </template>
                </div>
            </div>
        </div>

        <div class="haibei-news">
            <div class="haibei-warpper">
                <p class="c-blue-color fs30 tc">经纪商软件推荐下载</p>
                <div class="clearfix mt50">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <template v-for="(value,key) of agent">
                                <dl class="download-item about-download swiper-slide" :key="key">
                                    <dt class="tc">
                                        <img :src="value.url" alt="">
                                        <!-- <p class="mt15">{{value.title}}</p>
                                                <p class="mt5">{{value.version}}</p> -->
                                    </dt>
                                    <dd class="mt30 tc">
                                        <a :href="value.downloadUrl" target="_blank" class="fs16 tc c-blue-color">{{value.title}}</a>
                                    </dd>
                                </dl>

                            </template>
                        </div>
                        <template v-if="agent.length>4">
                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                        </template>
                    </div>
                </div>
            </div>
            <br>
            <br>
            <br>
        </div>

        <div class="haibei-news" style="background:#fff;">
            <div class="haibei-warpper">
                <p class="c-blue-color fs30 tc">海贝社区直播插件下载</p>
                <div class="haibei-guide-content clearfix mt50">
                    <template v-for="(value,key) in about">
                        <dl class="download-item about-download index-items" :key="key" :style="{width:value.width}">
                            <dt class="tc">
                                <div>
                                    <img :src="value.url" alt="">
                                    <!-- <p class="mt15">{{value.title}}</p>
                                    <p class="mt5">{{value.version}}</p> -->
                                </div>
                            </dt>
                            <dd class="mt15 tc">{{value.title}}</dd>
                            <dd class="mt20 tc">
                                <a :href="value.downloadUrl" target="_blank" class="c-blue-color fs16">立即下载</a>
                            </dd>
                        </dl>
                    </template>
                </div>
            </div>

        </div>



        <m-modal v-if="showModal" @close="showModal = false">
            <h3 class="tc" slot="header">{{items.title}}</h3>
            <div slot="body">
                <p class="tc">{{items.version}}</p>
                <div class="img-code-btn">
                    <div class="download-btn">
                        <a :href="items.downloadUrl" class="wap-download" target="_blank" style="padding:10px 30px">下载安装包</a>
                    </div>
                    <div class="donwl-img-code">
                        <div id="code_id"></div>
                        <p class="tc mt10 c-gray-color">扫描二维码下载</p>
                    </div>
                </div>
            </div>
        </m-modal>
       
    </div>
</template>

<script>
import mModal from "@/components/common/Modal";
export default {
  name: "donwload",
  data() {
    return {
      active: "download",
      newsList: dConfig.download,
     agent: dConfig.agentList,
     about: dConfig.aboutSoft,
     // banners: dConfig.banners,
      showModal: false,
      items: {}
    };
  },
  mounted() {
    window.document.title='海贝社区-下载专区'
    new Swiper(".swiper-container", {
      pagination: ".swiper-pagination",
      paginationClickable: true,
      nextButton: ".swiper-button-next",
      prevButton: ".swiper-button-prev",
      autoplay: 5000,
      speed: 300
    });

    new Swiper(".clearfix>.swiper-container", {
      slidesPerView: 4,
      spaceBetween: 6,
      slidesPerGroup: 4,
      //  loop: true,
      loopFillGroupWithBlank: true,
      // pagination: {
      //   el: '.swiper-pagination',
      //   type: 'fraction', 
      // },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
      }
    });
  },
  methods: {
    downloadModal(item) {
      if (item.type === "pc") {
        location.href = item.downloadUrl;
        return;
      } else {
        if (item.isDown) {
          this.showModal = true;
          this.items = item;
          setTimeout(() => {
            var qrcode = new QRCode(document.getElementById("code_id"), {
              text: item.mobileUrl,
              width: 130,
              height: 130,
              colorDark: "#000000",
              colorLight: "#ffffff",
              correctLevel: QRCode.CorrectLevel.H
            });
          }, 200);
        }
      }
    }
  },
  components: { mModal }
};
</script>

<style scoped>
.about-download {
  margin-top: 30px;
  margin-right: 10px;
}

.clearfix .swiper-button-next,
.clearfix .swiper-button-prev {
  height: 63px;
}

.clearfix .swiper-button-next,
.clearfix .swiper-container-rtl .swiper-button-prev {
  background: url("/static/images/right.png") no-repeat;
}

.clearfix .swiper-button-prev,
.clearfix .swiper-container-rtl .swiper-button-next {
  background: url("/static/images/left.png") no-repeat;
}
</style>